@import '../../assets/scss/predef.scss';
.ph-menu-root{
    -webkit-overflow-scrolling:touch;
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size:var(--phx);
    flex: 1;

    --ph-menu-color-active:var(--ph-c-light);
    --ph-menu-bd:transparent;
    --ph-menu-color:var(--ph-c);
    --ph-menu-color-dark:var(--ph-c-d1);
    --ph-menu-bg:var(--ph-light-light);
    --ph-menu-bg-dark:var(--ph-light-d1);
    &.ph-menu-dark{
        --ph-menu-color:var(--ph-c-l2);
        --ph-menu-bd:var(--ph-bd-dark);
        --ph-menu-color-dark:var(--ph-c-light);

        --ph-menu-bg:var(--ph-dark);
        --ph-menu-bg-dark:var(--ph-dark-d1);
        --ph-menu-bg-active:var(--ph-theme);
        --ph-menu-bga:var(--ph-dark-bga3);
    }
    &.ph-menu-light{
        --ph-menu-bga:var(--ph-light-bga1);
        --ph-menu-bg-active:var(--ph-theme);
    }
    &.ph-menu-primary{
        --ph-menu-bga:var(--ph-blue-bga1);
        --ph-menu-bg-active:var(--ph-primary);
        --ph-theme:var(--ph-blue-d1);
    }
    &.ph-menu-success{
        --ph-menu-bga:var(--ph-green-bga1);
        --ph-menu-bg-active:var(--ph-success);
        --ph-theme:var(--ph-green-d1);
    }
    &.ph-menu-danger{
        --ph-menu-bga:var(--ph-red-bga1);
        --ph-menu-bg-active:var(--ph-danger);
        --ph-theme:var(--ph-red-d1);
    }
    &.ph-menu-warning{
        --ph-menu-bga:var(--ph-orange-bga1);
        --ph-menu-bg-active:var(--ph-warning);
        --ph-theme:var(--ph-orange-d1);
    }
    overflow-y: auto;
    overflow-x: hidden ;
    min-width:  calc(var(phx) * 14.2857);
    background-color:var(--ph-menu-bg);
    color: var(--ph-menu-color);
    border-right: 5px solid var(--ph-menu-bg-dark);

    .ph-menu-item{
        position: relative;
        z-index: 1;
        
        .ph-action{
            text-align: left;
            padding: var(--ph-menu-padding);
            .ph-icon + span{
                margin-left: var(--ph-10);
            }
            &:hover{
                color: var(--ph-menu-color-dark); 
            }
        }
        .ph-submenu{
            overflow: hidden;
            background-color: var(--ph-menu-bga);
            .ph-action{
                padding: var(--ph-submenu-padding);
            }
        }
        &-active > .ph-action{
           color: var(--ph-menu-color-dark); 
        }
        &-leaf {
            &:hover{
                background-color: var(--ph-menu-bga); 
            }
        }
        &-active.ph-menu-item-leaf{
            background-color: var(--ph-menu-bg-active);
        }
        &-active.ph-menu-item-leaf > .ph-action{
            color: var(--ph-menu-color-active); 
        }
    }
}
@media screen and (max-width: 768px) {
    .ph-menu-root{
        border-right: none;
    }
}